<template>
	<z-paging ref="paging" class="app-container" :fixed="false" refresher-only @query="getNoticeData(detail.id)">
		<view class="title-box">
			<view class="title">{{ detail.name }}</view>
			<view class="date">时间：{{ parseTime(detail.updated_at, "{y}-{m}-{d} {h}:{i}") }}</view>
		</view>
		<view class="content-box">
			<rich-text :nodes="detail.content"></rich-text>
		</view>
	</z-paging>
</template>

<script setup>
	import {
		getNotice
	} from "@/api";
	import {
		reactive,
		toRefs,
		ref
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const state = reactive({
		detail: {}
	});

	const {
		detail
	} = toRefs(state);

	const paging = ref(null);

	// 获取通知详情
	async function getNoticeData(id) {
		const res = await getNotice({
			id
		});
		detail.value = res.data;
		paging.value.complete();
	}

	onLoad((option) => {
		getNoticeData(option.id);
	})
</script>

<style scoped lang="scss">
	.app-container {
		background-color: #FFFFFF;
		padding: 30rpx;
		overflow-y: auto;
		
		.title-box {
			.title {
				font-size: 36rpx;
				font-weight: bold;
			}
			
			.date {
				font-size: 26rpx;
				color: var(--gray-font-color);
				margin-top: 20rpx;
			}
		}
		
		.content-box {
			margin-top: 20rpx;
		}
	}
</style>